<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
</head>

<!-- 
data可以是一个函数，data函数应该返回一个对象
如果是函数，必须使用return语句返回{}对象
data可以是直接的对象，也可以是一个函数，什么时候使用直接的对象，什么时候使用函数？（学到组件就明白了）
-->
<body>
    <div class="app">
        <h1>{{msg}}</h1>
    </div>
    
<script>

    let phone={
        name:"苹果x"
    }
    Object.defineProperties(phone,"color",{
        value:"red",
        
        enumerable:false,//表示该属性是可以遍历的，可枚举的，可迭代的

        configurable:false,//表示该属性可以被删除
     
    })

    const vmm = new Vue({
      el: '#app',
      data : {
          
      }
    })
</script>
    <script>
        const vm = new Vue({
          el: '.app',
          data:function(){
            return{
                msg:'hello world'
            }
            }
        })
    </script>
</body>
</html>